<template>
  <div>
    <div class="box">
      <el-button type="primary" @click="handleAdd">添加文章</el-button>
    </div>
    <div class="box">
      <h3 v-text="typeName">新闻列表</h3>
    </div>
    <div class="box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="articleId"
          label="ID"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="title"
          label="文章标题"
        ></el-table-column>
        <el-table-column
          prop="authorName"
          label="会员"
          width="60"
        >
        <template slot-scope="scope">
          <div style="text-align: center;">
            <el-button v-if="scope.row.money==0" icon="el-icon-star-off" circle @click="handleVipUser(scope.$index, scope.row)"></el-button>
            <el-button v-if="scope.row.money!=0" type="warning" icon="el-icon-star-off" circle @click="handleVipUser(scope.$index, scope.row)"></el-button>
          </div>
        </template>
        </el-table-column>
        <el-table-column
          prop="authorName"
          label="作者"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="editorName"
          label="编辑"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="topRank"
          label="置顶"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="sortRank"
          label="顺序"
          width="80"
        ></el-table-column>
        <el-table-column prop="createTime" label="发布时间" width="180"></el-table-column>
        <el-table-column label="操作" width="320">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="warning"
              @click="handleEdit(scope.$index, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
            <el-button
              v-if="scope.row.issueTime == null"
              size="mini"
              type="primary"
              @click="handleIssueTime(scope.$index, scope.row)"
            >
              通过审核
            </el-button>
            <el-button
              v-if="scope.row.issueTime != null"
              size="mini"
              type="warning"
              @click="handleDelIssueTime(scope.$index, scope.row)"
            >
              取消审核
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleMakeDetailHtml(scope.$index, scope.row)"
            >
              生成
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="margin: 10px">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageNum"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>

    <div>
        <el-dialog title="新闻审核" :visible.sync="issueFormVisible">
          <el-form :model="issueForm">
            <el-form-item label="新闻标题" :label-width="formLabelWidth">
              <el-input v-model="issueForm.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="发布时间" :label-width="formLabelWidth">
              <el-date-picker v-model="issueForm.issueTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择发布时间">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="issueFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitIssueTime">确 定</el-button>
          </div>
        </el-dialog>
    </div>

    <div></div>
  </div>
</template>

<script>
import { getArticleListByTypeId,delArticleById,getArticleTypeById,makeDetailHtml,setArticleIssueTime,swapNewUser } from '@/api/news.js'
export default {
  name: 'NewsList',
  props: {
    typeId: { type: [String,Number], default: 0 },
  },
  data() {
    return {
      typeName: '新闻列表',
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: null,
      sizes: null,
      prev: null,
      pager: null,
      next: null,
      jumper: null,
      issueFormVisible: false,
      formLabelWidth: '120px',
      issueForm: {
        articleId: 0,
        title: '',
        issueTime: null,
      }
    }
  },
  mounted() {
    console.log('mounted', this.typeId)
    this.loadTypeInfo()
    this.getList()
  },
  methods: {
    // 加载栏目信息
    loadTypeInfo() {
      let params = { id: this.typeId }
      getArticleTypeById(params).then((res) => {
        console.log('getArticleTypeById', res)
        this.typeInfo = res.data
        this.typeName = this.typeInfo.typeName
      })
    },
    getList() {
      console.log('mount', this.typeId)
      let param = {
        id: this.typeId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyWord: 'admin',
      }
      getArticleListByTypeId(param).then((res) => {
        console.log(res)
        this.tableData = res.data.records
        this.pageNum = res.data.current
        this.pageSize = res.data.size
        this.total = res.data.total
      })
    },
    handleAdd() {
      console.log('handleAdd', this.typeId)
      this.$router.push('/news/article/' + this.typeId + '/0')
    },
    handleCurrentChange(pageNum) {
       this.pageNum=pageNum
       this.getList()
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize=pageSize
      this.getList()

    },
    // 编辑新闻
    handleEdit(index,row) {
      console.log('handleEdit',row)
      this.$router.push('/news/article/' + this.typeId + '/'+row.articleId)
    },
    // 设置新闻内容为会员内容
    handleVipUser(index,row) {
      console.log('handleVipUser', index, row);
      let param = {id: row.articleId};
      swapNewUser(param).then(res => {
        if(res.code == 200) {
          this.getList();
        }
        else {
          let msg = res.data.msg;
          this.$message.error(msg);
        }
      })
    },
    handleDelete(index,row) {
      console.log("handleDelete",row)
      if(confirm('您确定删除该篇文章吗？')){
        delArticleById({id:row.articleId}).then(res=>{
          if(res.code==200){
            this.$message.success('文章删除成功')
            this.getList()
          }else{
            this.$message.error();('文章删除成功')
          }
        })
      }
    },
    handleMakeDetailHtml(index,row) {
      let param = {id: row.articleId}
      makeDetailHtml(param).then(res => {
        if(res.code == 200) {
          this.$message.success("页面生成成功")
        }
        else {
          this.$message.error();('页面生成失败')
        }
      })
    },
    handleIssueTime(index,row) {
      this.issueForm.articleId = row.articleId
      this.issueForm.title = row.title
      this.issueForm.issueTime = row.issueTime

      this.issueFormVisible = true
    },
    handleDelIssueTime(index,row) {
      let param = {articleId: row.articleId}
      setArticleIssueTime(param).then(res => {
        if(res.code == 200) {
          this.$message.success('文章已取消审核')
          this.getList()
        }
      })
    },
    submitIssueTime() {
      if(this.issueForm.issueTime == null) {
        this.$message.error('没有设置发布时间')
        return
      }
      // 审核文章
      setArticleIssueTime(this.issueForm).then(res => {
        if(res.code == 200) {
          this.$message.success('文章审核成功')
          this.issueFormVisible = false
          this.getList()
        }
      })
    }
  },
}
</script>

<style scoped>
.box {
  margin: 10px;
}
</style>
